<template>
  <div class="phonecolr">

    <van-nav-bar title="手机号码">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>

    <van-cell title="手机号码" />
        <van-form validate-first @submit="onSubmit">
        <van-field
            placeholder="请输入手机号码"
            v-model="userphone.value1"
            name="validator"
            :rules="userrules.mobile"
        />
    </van-form>

    <van-cell title="验证码" />
    <van-form @submit="onSubmit" validate-first>
      <van-field 

        v-model="userphone.sms" 
        :rules="userrules.code" 
        center 
        name="validator"
        placeholder="请输入短信验证码" >

        <template #button>
          <van-button
            size="small"
            type="primary"
            :disabled="!countdown"
            v-bind:class="[countdown ? 'reg_active' : 'reg_disActive']"
            @click="getCode"
          >
            <span v-if="countdown">{{ text }}</span>
            <span v-if="!countdown">{{ text }} ({{ count }})</span>
          </van-button>
        </template>
      </van-field>
      <span class="headline">手机号码是您账户安全的重要凭证，请尽快绑定。</span>
      <van-button
        class="ok"
        type="primary"
        block
        native-type="submit"
        color="linear-gradient(to right, #FA7D22, #FA461B)"
        @click="okk"
        >确认</van-button
      >
    </van-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      smsz: "", //收到的验证码
      countdown: true, //验证码的状态，默认显示发送验证码
      count: "", //60秒倒计时
      timer: null,
      text: "发送验证码",
     
       

        userphone: {
         value1: "", //手机号码校验
         sms: "", //验证码校验
                },
        userrules: {
            mobile: [
                {
                    required: true,
                    message: '手机号不能输入为空'
                },
                {
                    pattern: /^1[3|5|7|8]\d{9}$/,
                    message: '手机格式错误'
                }
            ],
             code: [
                {
                    required: true,
                    message: '验证码不能为空'
                },
                {
                    pattern: /^\d{6}$/,
                    message: '验证码格式错误'
                }
        ]
        
        }
    };
  },
  methods: {
    getCode() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.countdown = false;
        this.text = "重新发送";
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.countdown = true;

            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    validator(val) {
      return /[0-9]{5}/.test(val);
    },
    onSubmit(values) {
      console.log("submit", values);
    },
    okk() {
        if (this.userphone.value1 && this.userphone.sms ) {
        console.log(123);
        this.$router.push("/personal");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.phonecolr {
  .headline {
    color: #a5a9b3;
    font-size: 12px;
    text-align: center;
    display: block;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .ok {
    width: 347px;
    height: 44px;
    margin-left: 15px;
    border-radius: 10px;
  }
}
</style>
